<template>
  <Card>
    <Api ref="apiRef" :load="pagePrintTemplate" v-slot="{ input, output, page, loading, onLoad, onSort }">
      <Table :data="output.rows" :loading="loading" @sorterChange="onSort">
        <TableColumn title="ID" field="id" />
        <TableColumn title="名称" field="name" />
        <TableColumn title="固定高度？" field="isFixedHeight" type="Boolean" />
        <TableColumn title="背景图" field="img">
          <template #cell="{ row }">
            <Image :src="row.img" width="100" />
          </template>
        </TableColumn>
        <TableColumn title="创建时间" field="createdAt" sortable type="Datetime" />
        <TableColumn title="操作" :width="110" align="center">
          <template #cell="{ row }">
            <Space size="mini">
              <Button type="primary" size="mini" @click="onUpdate(row)">编辑</Button>
            </Space>
          </template>
        </TableColumn>
      </Table>
    </Api>
  </Card>
</template>
<script setup>
import { Api, Modal } from '@idmy/core'
import { Button, Card, Image, Space, Table, TableColumn } from '@idmy/ui'
import { pagePrintTemplate } from './services'
import Create from './Create.vue'

const onUpdate = model => {
  console.info(model)
  Modal.open({
    component: Create,
    width: 4,
    title: '编辑',
    props: {
      model,
    },
  })
}
</script>
